<template>
  <el-dialog
    v-model="renderVisible"
    :title="props.title"
    :width="props.size"
    append-to-body
    destroy-on-close
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-transfer
      v-model="tableData"
      :data="getTransferData"
      :titles="['默认列表', '关联列表']"
      :button-texts="['移除', '加入']"
    />

    <template #footer>
      <el-button @click="handleClickCancel">取消</el-button>
      <el-button type="primary" @click="handleClickSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { PropType, computed, reactive, ref, watch } from 'vue';
import { getGoodsSpecsList } from '@/apis/goods-specs';
import { InitLoadOpts } from '@/utils/common';

// 加载状态
const loadOpts = reactive(InitLoadOpts());

// props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },

  title: {
    type: String,
    default: ''
  },

  size: {
    type: [String, Number],
    default: '50%'
  },

  rowData: {
    // type: Object as PropType<TempsPost>,
    type: Object as PropType<{ specs: string; list: string[] }>,
    default: () => ({
      // 规格名称
      specs: '',
      // 已选择的数据
      list: []
    })
  }
});

// emits
const emits = defineEmits(['update:modelValue', 'onComplete']);

// computed - 抽屉[显示|隐藏]
const renderVisible = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits('update:modelValue', val);
  }
});

// 穿梭框右侧数据(浅拷贝)
const tableData = ref<string[]>([]);
watch(
  () => props.modelValue,
  (val) => {
    if (!val) return;
    // 当rowData发生变化，初始化数据
    tableData.value = [...props.rowData.list];
  },
  {
    immediate: true
  }
);

// 商品规格
const goodsSpecsData = ref<API.goodsSpecs.EntitySchema[]>([]);
// 穿梭框左侧数据
const getTransferData = computed(() => {
  let result = [];

  if (!props.rowData.specs)
    result = goodsSpecsData.value.map((item) => item.title);
  else {
    result =
      goodsSpecsData.value
        .find((item) => item.title === props.rowData.specs)
        ?.content?.split(',') || [];
  }

  result = result.map((str) => ({
    key: str,
    label: str
  }));

  return result;
});

// 获取分页数据
const requestData = () => {
  const dataOpt = {
    page: 1,
    limit: 999
  };

  // 开始加载
  loadOpts.refresh = true;

  getGoodsSpecsList(dataOpt)
    .then((res) => {
      goodsSpecsData.value = res.data.data || [];
      // 加载结束
      loadOpts.refresh = false;
    })
    .catch((err) => {
      console.log('table list error', err);
      // 加载结束
      loadOpts.refresh = false;
    });
};

requestData();

// 取消
const handleClickCancel = () => {
  emits('onComplete', {
    action: 'cancel',
    // 返回源数据
    result: [...props.rowData.list]
  });
  renderVisible.value = false;
};

// 提交
const handleClickSubmit = () => {
  emits('onComplete', {
    action: 'submit',
    // 返回新数据
    result: [...tableData.value]
  });
  renderVisible.value = false;
};

// /**
//  * 监听关闭
//  *
//  * @param done
//  */
// const handleBeforeClose = (done: () => void) => {
//   // const result = unref(dataList);

//   const result: any[] = [];

//   emits('onComplete', {
//     action: 'close',
//     result
//   });

//   done();
// };
</script>

<style lang="scss" scoped></style>
